<template>
  <div>
    <!-- <el-collapse-item title="预计金额" name="3">
      <el-form ref="postRef" :model="form" label-width="auto" :label-position="labelPosition">
        <el-row :gutter="gutter">
          <el-col :span="span" v-for="item in expectedList">
            <el-form-item :label="item.label" :prop="item.key">
              <el-input v-model="form[item.key]" :placeholder="'请输入' + item.label" @input="addEstimated" />
            </el-form-item>
          </el-col>
          <el-col :span="span">
            <el-form-item label="预计合计" prop="estimatedAmount">
              <el-input v-model="form.estimatedAmount" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="span">
            <el-form-item label="审核金额" prop="assessmentIncome">
              <el-input v-model="form.assessmentIncome" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-collapse-item>
    <el-collapse-item title="实际金额" name="4">
      <el-form ref="postRef" :model="form" label-width="auto" :label-position="labelPosition">
        <el-row :gutter="gutter">
          <el-col :span="span" v-for="item in assessmentList">
            <el-form-item :label="item.label" :prop="item.key">
              <el-input v-model="form[item.key]" :placeholder="'请输入' + item.label" @input="addEstimated" />
            </el-form-item>
          </el-col>
          <el-col :span="span">
            <el-form-item label="实结合计" prop="actualSettlementAmount">
              <el-input v-model="form.actualSettlementAmount" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-collapse-item> -->
    <el-card>
      <el-form ref="postRef" :model="form" label-width="auto" :label-position="labelPosition">
        <el-row :gutter="gutter">
          <el-col :span="span" v-for="item in expectedList">
            <el-form-item :label="item.label" :prop="item.key">
              <el-input v-model="form[item.key]" :placeholder="'请输入' + item.label" @input="addEstimated" />
            </el-form-item>
          </el-col>
          <el-col :span="span">
            <el-form-item label="预计合计" prop="estimatedAmount">
              <el-input v-model="form.estimatedAmount" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="span">
            <el-form-item label="审核金额" prop="assessmentIncome">
              <el-input v-model="form.assessmentIncome" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card>
      <el-form ref="postRef" :model="form" label-width="auto" :label-position="labelPosition">
        <el-row :gutter="gutter">
          <el-col :span="span" v-for="item in assessmentList">
            <el-form-item :label="item.label" :prop="item.key">
              <el-input v-model="form[item.key]" :placeholder="'请输入' + item.label" @input="addEstimated" />
            </el-form-item>
          </el-col>
          <el-col :span="span">
            <el-form-item label="实结合计" prop="actualSettlementAmount">
              <el-input v-model="form.actualSettlementAmount" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="js">
import { ref } from 'vue';
import columnJson from '../fields/column.json'
const { workexpected, workassessment } = columnJson

const props = defineProps(['redgerType','span','labelPosition'])
const span =props.span
const labelPosition = props.labelPosition
const gutter = ref(24)
const width =ref('120px')

const { proxy } = getCurrentInstance();
const form = ref({})

// 预计金额
const expectedList = Object.entries(workexpected).map(([key, value]) => ({
  key: key,
  label: value
}));
//实际金额
const assessmentList = Object.entries(workassessment).map(([key, value]) => ({
  key: key,
  label: value
}));
function addEstimated() {
  form.value.estimatedAmount = sumAmount(form.value, expectedList)
  form.value.actualSettlementAmount = sumAmount(form.value, assessmentList)
}
//求和计算
function sumAmount(obj, props) {
  const sum = props.reduce((acc, item) => { if (obj[item.key] !== undefined) { acc += Number(obj[item.key]); } return acc; }, 0);
  return sum
}
defineExpose({ form })
</script>
<style scoped>
</style>